<template>
    <view class="container">
        <view class="report-header">
            <text class="title">情绪分析报告</text>
            <text class="period">{{ reportPeriod }}</text>
        </view>

        <view class="mood-overview">
            <view class="overview-card">
                <view class="card-header">
                    <text>整体情绪趋势</text>
                </view>
                <view class="trend-chart">
                    <!-- 这里可以集成图表组件 -->
                    <text class="placeholder">趋势图表</text>
                </view>
            </view>
        </view>

        <view class="mood-stats">
            <view class="stats-card">
                <view class="card-header">
                    <text>情绪统计</text>
                </view>
                <view class="stats-content">
                    <view class="stat-item">
                        <text class="stat-label">最常见心情</text>
                        <text class="stat-value">{{ mostCommonMood }}</text>
                    </view>
                    <view class="stat-item">
                        <text class="stat-label">记录天数</text>
                        <text class="stat-value">{{ recordedDays }}天</text>
                    </view>
                    <view class="stat-item">
                        <text class="stat-label">平均心情指数</text>
                        <text class="stat-value">{{ averageMoodScore }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="ai-insights">
            <view class="insights-card">
                <view class="card-header">
                    <text>AI洞察</text>
                </view>
                <view class="insights-content">
                    <text>{{ aiInsights }}</text>
                </view>
            </view>
        </view>

        <view class="mood-distribution">
            <view class="distribution-card">
                <view class="card-header">
                    <text>心情分布</text>
                </view>
                <view class="distribution-chart">
                    <!-- 这里可以集成饼图组件 -->
                    <text class="placeholder">心情分布图</text>
                </view>
            </view>
        </view>

        <view class="recommendations">
            <view class="recommendations-card">
                <view class="card-header">
                    <text>个性化建议</text>
                </view>
                <view class="recommendations-content">
                    <text>{{ personalRecommendations }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            reportPeriod: '最近30天',
            mostCommonMood: '一般',
            recordedDays: 28,
            averageMoodScore: 3.5,
            aiInsights: '',
            personalRecommendations: ''
        }
    },
    onLoad() {
        this.fetchMoodReport();
    },
    methods: {
        async fetchMoodReport() {
            try {
                const report = await this.$api.mood.getMoodReport({
                    period: 30
                });

                this.mostCommonMood = report.mostCommonMood;
                this.recordedDays = report.recordedDays;
                this.averageMoodScore = report.averageMoodScore;
                this.aiInsights = report.aiInsights;
                this.personalRecommendations = report.personalRecommendations;
            } catch (error) {
                uni.showToast({
                    title: '加载报告失败',
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    padding: 24px;
}

.report-header {
    text-align: center;
    margin-bottom: 24px;
}

.title {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.period {
    display: block;
    color: #666;
    margin-top: 8px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
}

.overview-card,
.stats-card,
.insights-card,
.distribution-card,
.recommendations-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trend-chart,
.distribution-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #F8F8F8;
    border-radius: 8px;
}

.placeholder {
    color: #999;
}

.stats-content {
    display: flex;
    justify-content: space-between;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-label {
    display: block;
    color: #666;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #1AAD19;
}

.insights-content,
.recommendations-content {
    background-color: #F8F8F8;
    border-radius: 8px;
    padding: 16px;
    color: #333;
    line-height: 1.6;
}
</style> 